<template>
  <div class="columns">
    <!--文章详情-->
    <div class="column is-four-quarters">
      <!--主题-->
      <el-card
          class="box-card"
          shadow="never"
      >
        <div
            slot="header"
            class="has-text-centered"
        >
          <p class="is-size-5 has-text-weight-bold">{{ notice.title }}</p>
          <div class="has-text-grey is-size-7 mt-3">
            <span>{{ dayjs(notice.startTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
            <el-divider direction="vertical"/>
            <span>发布者：管理员</span>
            <el-divider direction="vertical"/>
<!--            <span>查看：{{ article.view }}</span>-->
          </div>
        </div>

        <!--Markdown-->
        <div id="preview"/>

      </el-card>


    </div>



  </div>
</template>

<script>
import {deleteTopic, getTopic} from '@/api/post'
import {mapGetters} from 'vuex'
import Author from '@/views/post/Author'
import Recommend from '@/views/post/Recommend'
import LvComments from '@/components/Comment/Comments'
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import {getArticle} from "@/api/article";
import {findById, getInfoById} from "@/api/user";
import {getTagsByArticleId} from "@/api/tag";
import {findNoticeDetailById} from "@/api/notice";

export default {
  name: 'TopicDetail',
  components: {Author, Recommend, LvComments},
  computed: {
    ...mapGetters([
      'token', 'user'
    ])
  },
  data() {
    return {
      id: this.$route.params.noticeId,
      notice:''
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    renderMarkdown(md) {
      Vditor.preview(document.getElementById('preview'), md, {
        hljs: {style: 'github'}
      })
    },
    async fetchData(){
      findNoticeDetailById(parseInt(this.id)).then(res=>{
          this.notice=res.data
        this.renderMarkdown(this.notice.content)
      })
    },

  }
}
</script>

<style>
#preview {
  min-height: 300px;
}
</style>
